<template>
  <div class="image-viewer">
    <ul id="images" v-ps class="image-viewer-list">
      <li v-for="item in images" :key="item.id">
        <ws-image-box
          class="image-viewer-list__preview"
          width="auto"
          height="auto"
          :data="item"
          :preview="true">
        </ws-image-box>
      </li>
    </ul>
  </div>
</template>

<script>

import Viewer from 'viewerjs'
import 'viewerjs/src/index.css'

import * as imageService from '@/api/services/imageService'
import WsImageBox from './ImageBox'

export default {
  name: 'WsImageViewer',
  components: { Viewer, WsImageBox },
  props: {
    images: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      activeIndex: 0,
      gallery: null
    }
  },
  computed: {
  },
  mounted () {
    this.gallery = new Viewer(document.getElementById('images'))
  },
  methods: {
    /**
     * 图片的url
     */
    getImageUrl (image) {
      return imageService.getUrl(image.id)
    },

    /**
     * 上一张
     */
    handleprevClick (e) {
      this.activeIndex = (this.activeIndex - 1) % this.images.length
      this.activeImage = this.images[this.activeIndex]
      this.$emit('image-change', this.activeImage, this)
    },

    /**
     * 下一张
     */
    handleNextClick (e) {
      this.activeIndex = (this.activeIndex + 1) % this.images.length
      this.activeImage = this.images[this.activeIndex]
      this.$emit('image-change', this.activeImage, this)
    }
  }
}
</script>
